Tooltip migration: block-editor + block-directory consumers (1/5)#78411
Merged
Conversation
|
Size Change: +63 kB (+0.79%) Total Size: 8.04 MB 📦 View Changed
ℹ️ View Unchanged
|
ciampo
force-pushed
the
cursor/tooltip-migration-1-block-editor
branch
from
72496c7 to
e5718cb
Compare
ciampo
force-pushed
the
cursor/tooltip-migration-1-block-editor
branch
from
e5718cb to
92c23d5
Compare
ciampo
force-pushed
the
cursor/tooltip-migration-1-block-editor
branch
from
92c23d5 to
6157346
Compare
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
ciampo
commented
May 19, 2026
ciampo
commented
May 19, 2026
Contributor
Author
|
Spotted a regression in |
ciampo
force-pushed
the
cursor/tooltip-migration-1-block-editor
branch
from
6157346 to
85c6808
Compare
ciampo
commented
May 20, 2026
ciampo
commented
May 20, 2026
| <span className="block-directory-downloadable-block-list-item__author" /> | ||
| ), | ||
| } | ||
| <Tooltip.Root> |
ciampo
commented
May 20, 2026
| if ( showTooltip ) { | ||
| return <WCTooltip text={ title }>{ children }</WCTooltip>; | ||
| return ( | ||
| <Tooltip.Root> |
ciampo
commented
May 20, 2026
| className={ clsx( 'block-editor-global-styles__shadow__item', { | ||
| 'is-active': isActive, | ||
| } ) } | ||
| <Tooltip.Root> |
ciampo
commented
May 20, 2026
| > | ||
| <WCTooltip text={ title }> | ||
| <Composite.Item | ||
| <Tooltip.Root> |
ciampo
commented
May 20, 2026
| <WCIcon icon={ tab.icon } /> | ||
| </Tabs.Tab> | ||
| </WCTooltip> | ||
| <Tooltip.Root key={ tab.name }> |
ciampo
commented
May 20, 2026
| <Icon icon={ unseen } /> | ||
| </span> | ||
| </WCTooltip> | ||
| <Tooltip.Root> |
Contributor
Author
There was a problem hiding this comment.
(note: it requires hiding a block first, and hovering with pointer)
Member
There was a problem hiding this comment.
Your call on what to leave alone in the migration, but noting that this usage doesn't seem to make the visibilityLabel available to screen readers anywhere.
This usage was probably inaccessible to begin with, so it seems separate from our migration concern specifically (which is that new Tooltip doesn't add an aria-describedby to the trigger). But from just looking at the code, this seems closer to the "infotip" use case than a normal tooltip.
Contributor
Author
There was a problem hiding this comment.
Yeah, the trigger already had aria-hidden="true" and therefore it was not exposed to screen readers anyway.
I agree that this is closer to an "infotip". We could also consider adding some visually hidden text directly in the row's text content (or in the aria-describedby attribute). I've added an inline TODO comment and updated the PR description accordingly.
ciampo
commented
May 20, 2026
| { unitControl } | ||
| </div> | ||
| </WCTooltip> | ||
| <Tooltip.Root> |
Contributor
Author
There was a problem hiding this comment.
Couldn't find a quick way to test it as-is, and so I removed the showTooltip condition in the previous line to force the tooltip to always render
ciampo
force-pushed
the
cursor/tooltip-migration-1-block-editor
branch
from
85c6808 to
eff2cde
Compare
ciampo
force-pushed
the
cursor/tooltip-migration-1-block-editor
branch
from
eff2cde to
6177d9a
Compare
|
Flaky tests detected in 6177d9a. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26174569124
|
mirka
approved these changes
May 20, 2026
| <Icon icon={ unseen } /> | ||
| </span> | ||
| </WCTooltip> | ||
| <Tooltip.Root> |
Member
There was a problem hiding this comment.
Your call on what to leave alone in the migration, but noting that this usage doesn't seem to make the visibilityLabel available to screen readers anywhere.
This usage was probably inaccessible to begin with, so it seems separate from our migration concern specifically (which is that new Tooltip doesn't add an aria-describedby to the trigger). But from just looking at the code, this seems closer to the "infotip" use case than a normal tooltip.
ciampo
force-pushed
the
cursor/tooltip-migration-1-block-editor
branch
4 times, most recently
from
dcabdeb to
2589b09
Compare
Migrates 7 consumer call sites in `@wordpress/block-directory` and
`@wordpress/block-editor` from the legacy `Tooltip` exported by
`@wordpress/components` to the compositional `Tooltip` exported by
`@wordpress/ui` (built on top of base-ui under the hood):
- block-directory/downloadable-block-list-item
- block-editor/block-patterns-list (WithToolTip)
- block-editor/global-styles/shadow-panel-components
- block-editor/inserter/media-tab/media-preview
- block-editor/inspector-controls-tabs
- block-editor/list-view/block-select-button (non-interactive trigger; flagged for a11y follow-up)
- block-editor/preset-input-control/custom-value-controls
Also lands the jscodeshift codemod used to perform the mechanical rewrite
across all 5 PRs of the migration (tools/codemods/tooltip-components-to-ui.js):
npx jscodeshift -t tools/codemods/tooltip-components-to-ui.js \
--extensions=js,jsx,ts,tsx --parser=tsx \
packages/<scope>
Per-call-site `Tooltip.Provider`s are *not* introduced by the codemod;
group-coordination is handled by shell-level `<Tooltip.Provider>`s
mounted in the edit-post / edit-site / boot PRs.
Part of the broader migration tracked in
#78095 (the new @wordpress/ui Tooltip API).
ciampo
force-pushed
the
cursor/tooltip-migration-1-block-editor
branch
from
2589b09 to
5aaf8ae
Compare
Member
There was a problem hiding this comment.
Was this script supposed to be committed? Will it be useful in the future?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Follow up to #78095.
Migrates 7 consumer call sites in
@wordpress/block-directoryand@wordpress/block-editorfrom the legacyTooltip(@wordpress/components) to the new compositionalTooltip(@wordpress/ui, built on base-ui). Part 1 of a 5-PR series; also lands the one-shot jscodeshift codemod used across the whole series.Sites migrated in this PR
block-directory/components/downloadable-block-list-itemblock-editor/components/block-patterns-list(WithToolTip)block-editor/components/global-styles/shadow-panel-componentsblock-editor/components/inserter/media-tab/media-previewblock-editor/components/inspector-controls-tabsblock-editor/components/list-view/block-select-button— non-interactive<span aria-hidden>trigger; thevisibilityLabelit shows was already not exposed to AT before this PR (flagged for a11y follow-up — see Notes)block-editor/components/preset-input-control/custom-value-controlsFull 5-PR plan
Tooltip.Provider)Tooltip.Provider)Why?
#78095 introduced the new compositional
TooltipAPI in@wordpress/ui. This PR series migrates all consumers outside@wordpress/componentsitself to the new API, so that future tooltip work (delays, providers, positioner, base-ui upgrades) can happen in one place.Note
Call sites inside
@wordpress/components(notablyButton's internal Tooltip andTooltipInternalContext) stay on the legacy implementation — tracked as a separate follow-up.How?
Each
<Tooltip>is rewritten to the compositional API. The mechanical rewrite is automated by a jscodeshift codemod added in this PR; the few sites the codemod can't safely handle (shortcut, dynamicplacement, multi-child, …) are finished by hand in later PRs.API mapping
The new
Tooltip.Triggerdefaults to a<button>and supports non-button anchors via therenderprop (base-ui takes over event/ref wiring on the rendered element — no double wrapping).Codemod
npx jscodeshift -t tools/codemods/tooltip-components-to-ui.js \ --extensions=js,jsx,ts,tsx --parser=tsx \ packages/<scope>Tooltipspecifier (named or aliased, e.g.Tooltip as WCTooltip) from@wordpress/componentstoimport { Tooltip } from '@wordpress/ui'.<Tooltip>…</Tooltip>JSX usage, emits<Tooltip.Root [key]><Tooltip.Trigger render={ child } /><Tooltip.Popup [positioner] [className]>{ text }</Tooltip.Popup></Tooltip.Root>.shortcut,delay,hideOnClick,position, spread attributes, dynamic placements, or any unknown attribute.The codemod is a one-shot artifact; it can be removed once the 5-PR series merges.
Notes
Tooltip.Provideris emitted. Group coordination (instant-open after the first tooltip in a group) is handled by a single shell-level<Tooltip.Provider>introduced in PRs 2 and 5.aria-describedbyis no longer injected into triggers — the new tooltips are visual-only. Reviewers may want to flag specific sites forPopover+openOnHoverfollow-up.Tooltipfrom@wordpress/uiis not yet on the@wordpress/use-recommended-componentsallow-list. Each migrated import carries a per-site// eslint-disable-next-line @wordpress/use-recommended-componentsdirective (rather than allowlistingTooltipglobally) so the Storybook recommendation will be flipped once the newTooltiphas bedded in.block-select-buttonvisibilityLabel: the legacy code attached the tooltip to a<span aria-hidden="true">…</span>trigger, which made the label unreachable for screen readers regardless ofaria-describedbyinjection. This PR preserves that pre-existing behaviour (no regression introduced) and adds an inlineTODOnext to the site flagging the bug for a separate a11y fix.Testing Instructions
[data-wp-compat-overlay-slot]so they stack above components overlays (cross-library check from [ui] Tooltip: Default portal container to the wp compat overlay slot #78095).npm run test:unit -- packages/block-editor packages/block-directory— Jest unit tests should pass.Testing Instructions for Keyboard
Tabs.Tab,Composite.Item, etc.) and confirm the tooltip opens on focus and closes on blur /Esc.<span aria-hidden>trigger inlist-view/block-select-buttonis not keyboard-reachable on purpose; flagged above for a11y follow-up.Screenshots or screencast
No visual change is intended versus the legacy
Tooltip(same placement, same text, same hover/focus behaviour). N/A.Use of AI Tools
This PR was authored with assistance from Cursor (Claude). All changes were reviewed by a human before being committed; the codemod and migrated files were also exercised locally (Jest, lint, Prettier) before being pushed.